<template>
  <!-- 详情页，基本信息 -->
  <div class="all-wrap">
    <div class="basic-wrap">
      <div class="top flex-between">
        <div class="lef flex-center">
          <div class="icon"></div>
          <div class="title" style="font-size: 18px; font-weight: 700">
            <span>基本信息</span>
            <!-- 返回 -->
            <!-- <i class="el-icon-back icon_ccbox" @click="goBack"></i> -->
          </div>
        </div>
        <!-- <el-checkbox
          v-model="emptyChecked"
          size="mini"
          style="margin-right: 10px"
          >非空</el-checkbox
        > -->
      </div>
      <div class="logo" :style="{ backgroundImage: `url(${logo})` }"></div>
      <!-- <div class="big-title">美国海岸警卫队</div> -->
      <div class="big-title">{{ name }}</div>
      <div class="tags">
        <!-- 部分展示 -->
        <div
          v-show="!tagsTF"
          class="tag flex-center"
          v-for="(itemTag, index) in tags4"
          :key="itemTag + index"
        >
          {{ itemTag.value }}
        </div>
        <!-- 全部展示 -->
        <div
          v-show="tagsTF"
          class="tag flex-center"
          v-for="(itemTag, index) in tags"
          :key="itemTag + index"
        >
          {{ itemTag.value }}
        </div>
        <!-- 加减 -->
        <div class="icon_box" @click="tagsTFFun" v-if="tags4.length != tags.length">
          <!-- 下 -->
          <!-- <i v-show="!tagsTF" class="el-icon-d-arrow-right iconf"></i> -->
          <img v-show="!tagsTF" class="down_img" src="@/assets/xiala.svg" alt="" />
          <!-- 上 -->
          <!-- <i v-show="tagsTF" class="el-icon-d-arrow-right icont"></i> -->
          <img v-show="tagsTF" class="down_img rotate" src="@/assets/xiala.svg" alt="" />
        </div>
      </div>
      <div class="params">
        <!-- <div
        class="params-con flex-center-start"
        v-show="item.value || !emptyChecked"
        v-for="(item, index) in params"
        :key="item + index"
      >
        <div class="tit one-line-ellipsis">{{ item.key }}:</div>
        <div class="desc one-line-ellipsis">
          {{ item.value ? item.value : "----" }}
        </div>
      </div> -->
        <!-- 人物 1.人物 2.组织机构 3.武器装备 4.目标设施 5.部队 6.事件 -->
        <!-- <template v-if="$route.params.flag == '1'">
          <div
            class="params-con flex-center-start"
            v-show="name || !emptyChecked"
          >
            <div class="tit one-line-ellipsis">姓名</div>
            <div class="desc one-line-ellipsis">
              {{ name ? name : "----" }}
            </div>
          </div>

          <div
            class="params-con flex-center-start"
            v-show="old_name || !emptyChecked"
          >
            <div class="tit one-line-ellipsis">曾 用 名</div>
            <div class="desc one-line-ellipsis">
              {{ old_name ? old_name : "----" }}
            </div>
          </div>

          <div
            class="params-con flex-center-start"
            v-show="sex || !emptyChecked"
          >
            <div class="tit one-line-ellipsis">性 别</div>
            <div class="desc one-line-ellipsis">
              {{ sex ? sex : "----" }}
            </div>
          </div>

          <div
            class="params-con flex-center-start"
            v-show="nation || !emptyChecked"
          >
            <div class="tit one-line-ellipsis">民 族</div>
            <div class="desc one-line-ellipsis">
              {{ nation ? nation : "----" }}
            </div>
          </div>

          <div
            class="params-con flex-center-start"
            v-show="age || !emptyChecked"
          >
            <div class="tit one-line-ellipsis">年 龄</div>
            <div class="desc one-line-ellipsis">
              {{ age ? age : "----" }}
            </div>
          </div>

          <div
            class="params-con flex-center-start"
            v-show="native || !emptyChecked"
          >
            <div class="tit one-line-ellipsis">籍 贯</div>
            <div class="desc one-line-ellipsis">
              {{ native ? native : "----" }}
            </div>
          </div>

          <div
            class="params-con flex-center-start"
            v-show="marriage || !emptyChecked"
          >
            <div class="tit one-line-ellipsis">婚姻状况</div>
            <div class="desc one-line-ellipsis">
              {{ marriage ? marriage : "----" }}
            </div>
          </div>

          <div
            class="params-con flex-center-start"
            v-show="birth || !emptyChecked"
          >
            <div class="tit one-line-ellipsis">出 生 地</div>
            <div class="desc one-line-ellipsis">
              {{ birth ? birth : "----" }}
            </div>
          </div>

          <div
            class="params-con flex-center-start"
            v-show="birth_date || !emptyChecked"
          >
            <div class="tit one-line-ellipsis">出生日期</div>
            <div class="desc one-line-ellipsis">
              {{ birth_date ? birth_date : "----" }}
            </div>
          </div>

          <div
            class="params-con flex-center-start"
            v-show="home || !emptyChecked"
          >
            <div class="tit one-line-ellipsis">居 住 地</div>
            <div class="desc one-line-ellipsis">
              {{ home ? home : "----" }}
            </div>
          </div>

          <div
            class="params-con flex-center-start"
            v-show="culture || !emptyChecked"
          >
            <div class="tit one-line-ellipsis">文化程度</div>
            <div class="desc one-line-ellipsis">
              {{ culture ? culture : "----" }}
            </div>
          </div>

          <div
            class="params-con flex-center-start"
            v-show="party || !emptyChecked"
          >
            <div class="tit one-line-ellipsis">党派</div>
            <div class="desc one-line-ellipsis">
              {{ party ? party : "----" }}
            </div>
          </div>

          <div
            class="params-con flex-center-start"
            v-show="man_class || !emptyChecked"
          >
            <div class="tit one-line-ellipsis">人物类别</div>
            <div class="desc one-line-ellipsis">
              {{ man_class ? man_class : "----" }}
            </div>
          </div>

          <div
            class="params-con flex-center-start"
            v-show="death_date || !emptyChecked"
          >
            <div class="tit one-line-ellipsis">死亡时间</div>
            <div class="desc one-line-ellipsis">
              {{ death_date ? death_date : "----" }}
            </div>
          </div>
        </template> -->
        <template>
          <div
            class="params-con flex-center-start"
            v-for="(i, n) in zuhziList"
            :key="n"
            v-show="i.value || !emptyChecked"
          >
            <!-- one-line-ellipsis -->
            <div class="tit">{{ i.key }}</div>
            <div class="desc">
              <span v-for="(item, idx) in i.value" :key="idx">
                <!-- 简介拿出来 -->
                <span v-if="i.key == '简介' && item">
                  {{ briefTF ? briefFun(item) : item }}
                </span>
                <!-- 其他： -->
                <span v-else>
                  {{ item ? item : "----" }}
                </span>
                <img
                  v-if="i.key == '简介' && briefFun(item)"
                  :class="briefTF ? 'down_img' : 'down_img rotate'"
                  @click="briefTFFun"
                  src="@/assets/xiala.svg"
                  alt=""
                />
              </span>
            </div>
          </div>
        </template>
        <!-- 组织  1.人物 2.组织机构 3.武器装备 4.目标设施 5.部队 6.事件
        <template v-if="$route.params.flag == '2'">
          <div
            class="params-con flex-center-start"
            v-show="country || !emptyChecked"
          >
            <div class="tit one-line-ellipsis">国家/地区</div>
            <div class="desc">
              {{ country ? country : "----" }}
            </div>
          </div>
          <div
            class="params-con flex-center-start"
            v-show="kind || !emptyChecked"
          >
            <div class="tit one-line-ellipsis">种 类</div>
            <div class="desc">
              {{ kind ? kind : "----" }}
            </div>
          </div>
          <div
            class="params-con flex-center-start"
            v-show="_function || !emptyChecked"
          >
            <div class="tit one-line-ellipsis">功 能</div>
            <div class="desc">
              {{ _function ? _function : "----" }}
            </div>
          </div>
          <div class="line"></div>
          <div
            class="params-con flex-center-start"
            v-show="motto || !emptyChecked"
          >
            <div class="tit one-line-ellipsis">格 言</div>
            <div class="desc">
              {{ motto ? motto : "----" }}
            </div>
          </div>
          <div
            class="params-con flex-center-start"
            v-show="color || !emptyChecked"
          >
            <div class="tit one-line-ellipsis">代 表 色</div>
            <div class="desc">
              {{ color ? color : "----" }}
            </div>
          </div>
          <div
            class="params-con flex-center-start"
            v-show="music || !emptyChecked"
          >
            <div class="tit one-line-ellipsis">进 行 曲</div>
            <div class="desc">
              {{ music ? music : "----" }}
            </div>
          </div>
          <div class="line"></div>
          <div
            class="params-con flex-center-start"
            v-show="side_mark || !emptyChecked"
          >
            <div class="tit one-line-ellipsis">舷侧标志</div>
            <img class="icon-side_mark" :src="side_mark" />
          </div>
          <div
            class="params-con flex-center-start"
            v-show="birth || !emptyChecked"
          >
            <div class="tit one-line-ellipsis">舰 旗</div>
           <img class="icon-side_mark" :src="side_mark" /> -->
        <!-- </div>
        </template>-->
      </div>
    </div>
  </div>
</template>
l
<script>
export default {
  props: {
    tags: {
      default: () => [
        {
          value: "标签1",
          type: "1",
        },
        {
          value: "标签2",
          type: "2",
        },
        {
          value: "标签1",
          type: "1",
        },
        {
          value: "标签2",
          type: "2",
        },
        {
          value: "标签1",
          type: "1",
        },
        {
          value: "标签2",
          type: "2",
        },
      ],
    },
    // params: {
    //   default: () => [
    //     {
    //       key: "首飞时间首飞时间",
    //       value: "1986年91986年9月28日1986年9月28日月28日",
    //     },
    //     {
    //       key: "气动布局",
    //       value: "变后惊翼",
    //     },
    //     {
    //       key: "首飞时间",
    //       value: "",
    //     },
    //     {
    //       key: "气动布局",
    //       value: "变后惊翼",
    //     },
    //     {
    //       key: "首飞时间",
    //       value: "1986年9月28日",
    //     },
    //     {
    //       key: "气动布局",
    //       value: "变后惊翼",
    //     },
    //     {
    //       key: "首飞时间",
    //       value: "1986年9月28日",
    //     },
    //     {
    //       key: "气动布局",
    //       value: "变后惊翼",
    //     },
    //   ],
    // },
  },
  data() {
    return {
      detailType: 1,
      emptyChecked: false,
      // 人物
      name: "",
      logo: "",
      old_name: "",
      sex: "",
      nation: "",
      age: "",
      native: "",
      marriage: "",
      birth: "",
      birth_date: "",
      home: "",
      culture: "",
      party: "",
      man_class: "",
      death_date: "",
      // 组织
      country: "",
      kind: "",
      _function: "",
      motto: "",
      color: "",
      music: "",
      side_mark: require("@/assets/common/u1278.svg"),
      zuhziList: [],
      briefTF: false, //简介缩放开关
      tagsTF: false, //是否全部展开
    };
  },
  watch: {
    keyValue: {
      deep: true,
      immediate: true,
      handler(n) {
        this.inputValue = n;
      },
    },
  },
  created() {
    // 我要赋值
    if (this.$route.query.id) {
      localStorage.bfId = this.$route.query.id;
    }
    if (this.$route.query.flagType) {
      localStorage.bfFlag = this.$route.query.flagType;
    }
    // 请求数据
    if (this.$route.params.id && this.$route.params.flag) {
      localStorage.bfId = this.$route.params.id;
      localStorage.bfFlag = this.$route.params.flag;
      localStorage.bfname = this.$route.params.name;
      this.getBasic(this.$route.params.id, this.$route.params.flag);
    } else {
      this.getBasic(localStorage.bfId, localStorage.bfFlag);
    }
  },
  methods: {
    goBack() {
      // console.log("返回上一页");
      this.$router.go(-1);
    },
    // 标签全部显示与否：
    tagsTFFun() {
      this.tagsTF = !this.tagsTF;
    },
    getBasic(id, flag) {
      console.log("这是什么id", id);
      this.$api.getBasic(flag, id).then((res) => {
        // console.log("基本信息：", res);
        // 人物
        this.name = res.resultMap.基本信息.name;
        this.logo = res.resultMap.基本信息.logo;
        this.birth_date = res.resultMap.基本信息.rwBirthdate;
        this.birth = res.resultMap.基本信息.rwBirthplace;
        this.culture = res.resultMap.基本信息.rwEducation;
        this.marriage = res.resultMap.基本信息.rwMarriage;
        this.party = res.resultMap.基本信息.rwPolitical;
        this.sex = res.resultMap.基本信息.rwSex;
        this.nation = res.resultMap.基本信息.rwNation;
        this.man_class = res.resultMap.基本信息.rwType;
        this.zuhziList = this.zuhziListFun(res.resultMap.基本信息.params);
        this.tags = res.resultMap.基本信息.tags;
        this.tags = res.resultMap.基本信息.tags;
      });
    },
    // 处理
    zuhziListFun(arr) {
      let a = [];
      arr.forEach((item) => {
        let s = {
          key: item.key,
          value: item.value.split(","),
        };
        a.push(s);
        // console.log("你是什么sss", s);
      });
      return a;
    },
    // 字符串截取
    briefFun(b) {
      let num = 34;
      let str = null;
      if (b.length > num) {
        str = b.substring(0, num) + "...";
      }
      // console.log(b.length);
      return str;
    },
    // 简介的缩放开关
    briefTFFun() {
      this.briefTF = !this.briefTF;
    },
  },
  computed: {
    // 只提取前面4个，只显示2行
    tags4() {
      let n = 4;
      // 小于4个，赋值
      if (this.tags.length < n) {
        return this.tags;
      }
      let tagsArr = [];
      // 大于4个，截取前面N个
      this.tags.forEach((item, idx) => {
        if (idx < n) {
          tagsArr.push(item);
        }
      });
      return tagsArr;
    },
  },
};
</script>

<style lang="scss" scoped>
.all-wrap {
  overflow: hidden;
  width: 3.86rem;
  height: 100%;
}
.basic-wrap {
  font-weight: 400;
  font-size: 0.14rem;
  letter-spacing: 1px;
  color: rgba(0, 0, 0, 0.647);
  line-height: 1;
  width: calc(3.86rem + 17px);
  height: 100%;
  overflow-y: scroll;
  padding: 0.2rem 0.1rem 0.2rem 0.2rem;
  border-width: 0.02rem 0rem 0rem;
  border-top-style: solid;
  border-top-color: rgb(45, 115, 255);
  background-color: rgb(255, 255, 255);
  .top {
    .icon {
      margin-right: 0.1rem;
      width: 0.06rem;
      height: 0.4rem;
      background-image: url(~@/assets/common/title-item.png);
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
    }
    .icon_ccbox {
      margin-left: 0.1rem;
      cursor: pointer;
      // font-size: 0.3rem;
    }
  }
  .logo {
    height: 2.9rem;
    //   width: 100%;
    margin: 0.2rem 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }
  .big-title {
    margin-bottom: 0.1rem;
    text-align: center;
    font-weight: 650;
    font-size: 0.18rem;
    letter-spacing: 0.03rem;
    color: rgba(0, 0, 0, 0.847);
  }
  .tags {
    margin-top: 0.1rem;
    // height: 0.8rem;
    overflow: hidden;
    .tag {
      margin-right: 0.1rem;
      display: inline-block;
      padding: 0.06rem 0.2rem;
      border-radius: 0.06rem;
      background-color: #c3d7ff;
      color: #2d73ff;
      font-weight: 900;
      line-height: 1;
      margin-bottom: 0.1rem;
    }
  }
  .icon_box {
    box-sizing: border-box;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 0.3rem;
    cursor: pointer;
    .iconf {
      position: relative;
      top: 0.06rem;
      transform: rotate(90deg);
    }
    .icont {
      position: relative;
      top: 0.06rem;
      transform: rotate(-90deg);
    }
    .down_img {
      box-sizing: border-box;
      height: 0.24rem;
      position: relative;
      top: 0.06rem;
      margin-bottom: 0.06rem;
      cursor: pointer;
      // margin-top: 0.04rem;
    }
    .rotate {
      transform: rotate(180deg);
    }
  }
  .params {
    margin-top: 0.2rem;
    overflow: hidden;
    .tit {
      width: 1.1rem;
      font-weight: 700;
      letter-spacing: 0.02rem;
      color: rgba(0, 0, 0, 0.84);
      // line-height: 0.4rem;
    }
    .params-con {
      // display: flex;
      // justify-content: center;
      margin-top: 0.2rem;
      align-items: flex-start;
    }
    .desc {
      max-width: 2rem;
      // max-height: 2rem;
      // overflow: hidden;
      // text-overflow: ellipsis;
      // white-space: nowrap;
      > span {
        display: inline-block;
        width: 100%;
      }
      > span + span {
        margin-top: 8px;
      }
      .down_img {
        box-sizing: border-box;
        height: 0.24rem;
        position: relative;
        top: 0.03rem;
        cursor: pointer;
        // margin-top: 0.04rem;
      }
      .rotate {
        transform: rotate(180deg);
      }
    }
    .icon-side_mark {
      width: 0.72rem;
      height: 0.43rem;
      // background-image: url(~@/assets/common/u1278.svg);
      // background-repeat: no-repeat;
      // background-position: center;
      // background-size: contain;
    }
    .line {
      margin: 0.2rem 0 0.1rem 0;
      width: 3.5rem;
      height: 1px;
      background-color: rgba(45, 115, 255, 1);
    }
  }
}
</style>
